<template>
   <div class="container" >
    <input placeholder="请输入用户名称">
    <input placeholder="请输入用户密码" v-focus="aaa">
    <input placeholder="请输入手机号" v-hasPermission="'cldk_user_add'">
    <button  @click="btn">登录</button>
    <button  @click="btn1">移除</button>
    <span style="display: none">{{ this.msg }}</span>
    <component :is="commentName"></component>
    <button  @click="add">add</button>
   </div>
</template>
<script>
import LifeVue from './components/Life.vue';
import HelloWorldVue from './components/HelloWorld.vue';
   export default {
     name: '',
     components:{
       LifeVue,
       HelloWorldVue
     },
     data: function(){
       return {
        msg:0,
        commentName:"LifeVue"
       }
     },
     methods:{
        btn(){
            this.$permiss.push("cldk_user_add");
            this.msg++;
        },
        btn1(){
            var that = this;
            this.$permiss.some(function(item,index){
                if(item === "cldk_user_add"){
                    that.$permiss.splice(index,1);
                }
            });
            this.msg++;
        },
        add(){
            this.commentName = "HelloWorldVue";
        }
     },
     directives:{
        focus:{
            mounted(el){
                el.focus();
            }
        },
        onceClick:{
            mounted(el,binding){
                el.addEventListener('click',function(){
                    console.info(binding)
                    if(!el.disabled){
                        el.disabled = true;
                        setTimeout(function(){
                            el.disabled = false;
                        },binding.value || 1000)
                    }
                })
            }
        }
     },
     created:function(){
        this.$permiss.push("cldk_user_add"); 
     }
   }
</script>
<style>
  html,
  body, 
  #app{
    height: 100%;
  }
</style>
<style scoped>
   .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: aliceblue;
   }
   .tr{
      width: 200px;
      flex-basis: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: beige;
      align-items: center;
    }
   .second{
      background-color: aqua;
   }
</style>